<template>
  <div class="city">
     <cityHeader></cityHeader>
     <citySearch></citySearch>
     <cityList :city="city" :hotCity="hotCity" :letter="letter"></cityList>
     <alphaBet :city="city" @change="handLetter"></alphaBet>
  </div>
</template>

<script>
import Axios from 'axios'
import cityHeader from './components/CityHeader'
import citySearch from './components/Seacrh'
import cityList from './components/List'
import alphaBet from './components/AlphaBet'

export default {
  name: 'City',
  components: {
    cityHeader,
    citySearch,
    cityList,
    alphaBet
  },
  data () {
    return {
      city: {},
      hotCity: [],
      letter: ''
    }
  },
  methods: {
    getCityInfo () {
      Axios.get('static/mock/city.json').then((res) => {
        console.log(res)
        res = res.data
        if (res.ret && res.data) {
          const data = res.data
          this.city = data.cities
          this.hotCity = data.hotCities
        }
      })
    },
    handLetter (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCityInfo()
  }
}
</script>

<style lang="stylus" scoped>

</style>
